import { rechargeAmount } from '@/services/production-center';
import { Form, Input, Modal, message } from 'antd';
import { useState } from 'react';

const RechargeModal = (props: {
  openCharge: boolean;
  alipayNickName: string;
  onCancel: () => void;
  successCallback: () => void;
}) => {
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();
  const { openCharge, alipayNickName, onCancel, successCallback } = props;
  const [success, setSuccess] = useState(false);
  return (
    <div>
      <Modal
        title="备付金充值"
        open={openCharge}
        maskClosable={false}
        onCancel={onCancel}
        okButtonProps={{
          loading: confirmLoading,
        }}
        okText={success ? '已支付' : '确定'}
        onOk={async () => {
          if (success) {
            successCallback();
            return;
          }
          await form.validateFields(['rechargeAmount']);
          setConfirmLoading(true);
          try {
            const res = (await rechargeAmount({
              alipayNickName: alipayNickName,
              transAmount: form.getFieldValue('rechargeAmount'),
            })) as any;
            if (res.success) {
              window.open(res.data);
              setSuccess(true);
            } else {
              message.error(res.resultMessage);
            }
          } catch (error) {
          } finally {
            setConfirmLoading(false);
          }
        }}
      >
        <div className="mt-6 bg-[#e8e8e8] text-[#00bdff] px-6 py-4 rounded-md">
          您将充值备付金到支付宝资金托管账户用于转账使用，注意充值的是备付金不是服务费
        </div>
        <div className="my-6">支付宝账号：{alipayNickName}</div>
        <Form form={form}>
          <Form.Item
            name={'rechargeAmount'}
            label="充值金额"
            wrapperCol={{ span: 12 }}
            rules={[{ required: true, message: '请输入充值金额' }]}
          >
            <Input placeholder="请输入充值金额 单位元" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default RechargeModal;
